<template>
  <div class="users" v-if="cardShow == '2'">
    <div class="acea-row">
      <div class="leftDecBox">
        <div class="service_header">
          <img v-if="userData.top_bg_img" :src="userData.top_bg_img" alt />
        </div>

        <div
          style="height:150px;position:relative;z-index:1;"
          class="dotted"
          @click="changeServiceIndex(0)"
          :class="serviceIndex===0?'solid':''"
        >
          <div class="service-box">
            <img class="avar" src="@/assets/images/f.png" alt />
            <div class="userHeadContent">
              <div style="font-weight:550;">用户名称用户名称</div>
              <div class="tips">
                <img :src="userData.phone.icon" alt />
                <div style="color: rgb(34, 34, 34);">185****5932</div>
              </div>
            </div>
          </div>

          <div class="moneyBox">
            <div>
              <div :style="`color:${userData.phone.font_color}`">0.00</div>
              <div class="title">我的余额</div>
            </div>
            <div>
              <div :style="`color:${userData.phone.font_color}`">25</div>
              <div class="title">优惠券</div>
            </div>
          </div>
        </div>

        <div style="padding:0 18px;">
          <div
            class="orderListBox dotted"
            @click="changeServiceIndex(1)"
            :class="serviceIndex===1?'solid':''"
          >
            <div class="titleBox">
              <div>订单中心</div>
              <div>
                <div>查看全部</div>
                <div class="iconfont iconjinru"></div>
              </div>
            </div>
            <div class="orderList">
              <div class="item" v-for="(item,index) in userData.routine_my_order" :key="index">
                <img :src="item.pic" alt />
                <div>{{item.name||'标题'}}</div>
              </div>
            </div>
          </div>

          <div
            class="swiperBox dotted"
            @click="changeServiceIndex(2)"
            :class="serviceIndex===2?'solid':''"
          >
            <img v-if="userData.routine_my_banner.length" :src="userData.routine_my_banner[0].pic" alt />
            <div v-else>暂无数据</div>
          </div>

          <div
            class="orderListBoxService dotted"
            @click="changeServiceIndex(3)"
            :class="serviceIndex===3?'solid':''"
          >
            <div class="titleBox">
              <div>我的服务</div>
            </div>
            <div class="orderList">
              <div class="item" v-for="(item,index) in userData.routine_my_menus" :key="index">
                <img :src="item.pic" alt />
                <div>{{item.name||'标题'}}</div>
              </div>
            </div>
          </div>

          <div
            class="loginBoxBtn dotted"
            @click="changeServiceIndex(4)"
            :class="serviceIndex===4?'solid':''"
          >
            <img :src="userData.staff_icon" alt />
            <div>服务人员登录</div>
          </div>

          <div
            class="loginBoxBtn dotted"
            @click="changeServiceIndex(5)"
            :class="serviceIndex===5?'solid':''"
          >
            <img :src="userData.company_icon" alt />
            <div>门店端登录</div>
          </div>
        </div>
      </div>

      <div class="rightDecBox">
        <div class="titleDecBox">页面设置</div>

        <div v-if="serviceIndex === 0">
          <el-row>
            <el-col :span="4">背景图</el-col>
            <el-col :span="20">
              <div class="upLoadPicBox" @click="modalPicTap(false,'top_bg_img')">
                <div v-if="userData.top_bg_img" class="pictrue">
                  <img :src="userData.top_bg_img" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
                <div class="from-tips">建议尺寸：375 * 270px</div>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">手机图标</el-col>
            <el-col :span="20">
              <div class="upLoadPicBox" @click="modalPhonePicTap(false,'icon')">
                <div v-if="userData.phone.icon" class="pictrue">
                  <img :src="userData.phone.icon" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
                <div class="from-tips">建议尺寸：13 * 13px</div>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">数字颜色（余额等）</el-col>
            <el-col :span="20">
              <el-color-picker v-model="userData.phone.font_color"></el-color-picker>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">个人资料背景</el-col>
            <el-col :span="20">
              <el-color-picker v-model="userData.selfInfoBackColor"></el-color-picker>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 1">
          <el-row>
            <el-col :span="4">订单中心：</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：86 * 86px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList :modelMaxLength="5" :configObj="userData.routine_my_order" name="routine_my_order"></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 2">
          <el-row>
            <el-col :span="4">广告位：</el-col>
            <el-col :span="20">
              <div>
                <el-switch
                  style="width:44px;margin-bottom:12px;"
                  v-model="userData.my_banner_status"
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#2d8cf0"
                ></el-switch>
              </div>
              <div style="color:#999;">建议尺寸：86 * 86px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList :configObj="userData.routine_my_banner" name="routine_my_banner"></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 3">
          <el-row>
            <el-col :span="4">我的服务：</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：86 * 86px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList :configObj="userData.routine_my_menus" name="routine_my_menus"></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 4">
          <el-row>
            <el-col :span="4">服务人员图标</el-col>
            <el-col :span="20">
              <div class="upLoadPicBox" @click="modalPicTap(false,'staff_icon')">
                <div v-if="userData.staff_icon" class="pictrue">
                  <img :src="userData.staff_icon" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
                <div class="from-tips">建议尺寸：20 * 20px</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 5">
          <el-row>
            <el-col :span="4">门店端图标</el-col>
            <el-col :span="20">
              <div class="upLoadPicBox" @click="modalPicTap(false,'company_icon')">
                <div v-if="userData.company_icon" class="pictrue">
                  <img :src="userData.company_icon" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
                <div class="from-tips">建议尺寸：20 * 20px</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadList from '@/views/pagediy/onsite/components/uploadList';
import { getOnsiteHomeDiyApi,saveOnsiteDiyData, } from '@/api/onsite';

export default {
  components: { UploadList },
  name: 'services',
  props: {
    cardShow: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      serviceIndex: 0,

      userData: {
        top_bg_img: '', //背景图
        phone: {
          icon: '', //手机图标
          font_color: '#222222',
        },
        selfInfoBackColor: '', //个人资料背景

        routine_my_order: [], //订单中心

        my_banner_status: true,
        routine_my_banner: [], //广告位

        routine_my_menus: [], //我的服务

        staff_icon: '', //服务人员图标
        company_icon: '', //门店端图标
      },
    };
  },

  watch: {},
  mounted(){
    this.getDiyData();
  },
  methods: {
    //获取数据
    getDiyData() {
      getOnsiteHomeDiyApi('member_onsite').then((res) => {
        this.userData = res;
      });
    },
    changeServiceIndex(type) {
      this.serviceIndex = type;
    },

    // 点击商品图
    modalPicTap(multiple, field) {
      const _this = this;
      const attr = [];
      this.$modalUpload(
        function (img) {
          if (!img) return;
          _this.userData[field] = img[0].sattDir;
        },
        multiple,
        'store',
      );
    },

    // 点击商品图
    modalPhonePicTap(multiple, field) {
      const _this = this;
      const attr = [];
      this.$modalUpload(
        function (img) {
          if (!img) return;
          _this.userData.phone[field] = img[0].sattDir;
        },
        multiple,
        'store',
      );
    },

    onSubmit() {
      console.log(this.userData)
      saveOnsiteDiyData(this.userData).then(res => {
        this.$message.success('操作成功');
      })
    },
  },
};
</script>

<style scoped>
._flex-row-mid {
  display: flex;
  align-items: center;
}

.acea-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.leftDecBox {
  width: 310px;
  position: relative;
  background: #f7f7f7;
  border-right: 1px solid #eee;
  margin-right: 30px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 30px;
  padding-bottom: 15px;
}

.service_header {
  width: 100%;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.service_header > img {
  width: 100%;
  height: 100%;
}

.solid {
  border: 1px solid #2d8cf0 !important;
}

.dotted {
  border: 1px dashed #2d8cf0;
  cursor: pointer;
}

.service-box {
  padding: 20px 20px 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.service-box .avar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
}

.service-box .userHeadContent {
  flex: 1;
  min-width: 20px;
  color: #fff;
}

.service-box .userHeadContent .tips {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 21px;
  margin-top: 4px;
  border-radius: 13px;
  font-size: 11px;
  background-color: rgba(34, 34, 34, 0.3);
}

.service-box .userHeadContent .tips img {
  width: 13px;
  height: 13px;
}

.service-box-logo {
  height: 25px;
  margin-right: 5px;
}

.service-box-input {
  display: flex;
  align-items: center;
  padding: 0px 10px;
  background-color: rgb(255, 255, 255);
  border-radius: 100px;
  height: 28px;
}

.service-input {
  margin-left: 5px;
  background-color: #fff;
  border-radius: 100px;
  flex: 1;
  padding: 2px 10px;
  display: flex;
  align-items: center;
}

.navBox {
  width: 100%;
  margin-top: 40px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px 0;
  z-index: 1;
  position: relative;
}

.navBox .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
  overflow: hidden;
}

.navBox .item > img {
  width: 23px;
  height: 23px;
  margin-bottom: 8px;
}

._line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.centerNavBox {
  margin-top: 40px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.centerNavBox .title {
  padding: 10px 15px 5px;
  font-size: 13px;
  font-weight: 550;
}

.centerNavBox .list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.centerNavBox .list img {
  width: 100%;
}

.centerNavBox .list img:nth-child(1) {
  grid-row: 1/3;
}

.centerNavBox .list img:nth-child(4) {
  grid-column: 1/3;
}

.swiper-box {
  padding: 15px;
  margin-top: 10px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
}

.swiper-box img {
  width: 100%;
}

.swiper-service-box {
  padding: 30px 20px;
  position: relative;
  z-index: 1;
}

.home-list-box {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  position: relative;
  z-index: 1;
  gap: 5px 3px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
}

.home-list-box .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
}

.home-list-box .item .sub {
  font-size: 10px;
  padding: 0px 5px;
  border-radius: 100px;
  line-height: 1.2;
  text-align: center;
  color: rgb(255, 255, 255);
}

.bottomContent {
  padding: 0 18px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

.bottomContent .list {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px 0;
  background-color: #fff;
  border-radius: 8px;
}

.bottomContent .list .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
  font-size: 12px;
}

.bottomContent .list .item img {
  width: 23px;
  height: 23px;
  margin-bottom: 8px;
  font-size: 12px;
}

.bottomContent .list .item .title {
  width: 100%;
}

.bottomContent .list .item .sub {
  width: 100%;
}

.bottomNavBox {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 20px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottomNavBox .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
}

.bottomNavBox .item img {
  width: 25px;
  height: 25px;
}

.rightDecBox {
  flex: 1;
  min-width: 510px;
  padding-right: 20px;
}

.rightDecBox .titleDecBox {
  font-size: 14px;
  font-weight: 550;
  position: relative;
  color: rgba(0, 0, 0, 0.85);
}

.rightDecBox .titleDecBox::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 14px;
  background-color: #1890ff;
  top: 50%;
  margin-top: -7px;
  left: -8px;
}

.rightDecBox .el-row {
  margin-top: 20px;
}

.moneyBox {
  display: flex;
}

.moneyBox > div {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 15px;
  font-weight: 550;
}

.moneyBox .title {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  margin-top: 5px;
}

.orderListBox {
  width: 100%;
  padding: 15px 0;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.orderListBox .titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 0 15px;
}
.orderListBox .orderList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px 0;
  font-size: 12px;
}

.orderListBox .orderList .item {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.orderListBox .orderList img {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}

.orderListBoxService {
  width: 100%;
  padding: 15px 0;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.orderListBoxService .titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 0 15px;
}
.orderListBoxService .orderList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px 0;
  font-size: 12px;
}

.orderListBoxService .orderList .item {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.orderListBoxService .orderList img {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}

.swiperBox {
  width: 100%;
  height: 63px;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.swiperBox > img {
  width: 100%;
  height: 100%;
}

.loginBoxBtn {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 10px;
}

.loginBoxBtn img {
  width: 20px;
  height: 20px;
  margin-right: 60px;
}
</style>
